<template>
	<div class="home">
		<!-- 新增的轮播图组件 -->
		<home-carousel></home-carousel>

		<!-- 首页功能快捷入口 Grid宫格 -->
		<home-enter></home-enter>

		<!-- 新增 HomeLabel 组件 -->
		<home-label></home-label>

		<!-- 首页轮播 -->
		<!-- <home-swipe :carouselItems="carouselItems"></home-swipe> -->

		<!-- 商品推荐 -->
		<!-- <home-product :productItems="recommendedItems" title="商品推荐" icon="gift-o" class="product-section"></home-product> -->

		<!-- 新品上架 -->
		<!-- <home-product :productItems="newArrialItems" title="新品上架" icon="vip-card-o" class="product-section"></home-product> -->

		<!-- 销售排行 -->
		<!-- <home-product :productItems="topSaleItems" title="销售排行" icon="award-o" class="product-section"></home-product> -->
	</div>
</template>

<script>
	// 导入封装后的首页接口
	import * as HomeAPI from "@/api/home.js";
	// import '@/src/mock/mockFood.js'; // 引入模拟数据文件
	import HomeEnter from "./components/HomeEnter.vue";
	import HomeCarousel from "./components/HomeCarousel.vue"; // 引入新的轮播图组件
	import HomeLabel from "./components/HomeLabel.vue"; // 引入 HomeLabel 组件

	export default {
		name: "home",
		components: {
			HomeEnter,
			HomeCarousel,
			HomeLabel // 注册 HomeLabel 组件
		},
		data() {
			return {
				carouselItems: [], // 轮播图
				recommendedItems: [], // 商品推荐
				newArrialItems: [], // 新品上架
				topSaleItems: [], // 销售排行
				location: null, // 存储定位信息
				searchKeyword: "", // 搜索关键词
			};
		},

		// 生命周期钩子 - 实例创建后，可以用 this.*
		created() {
			// 使用封装后的接口
			HomeAPI.getHomeDataAPI().then((result) => {
				console.log(result); // 控制台调式输出
				this.carouselItems = result.data.carouselItems; // 保存 API 调用的返回的轮播数据
				this.recommendedItems = result.data.recommendedItems; // 保存首页商品推荐数据
				this.newArrialItems = result.data.newArrialItems; // 保存首页新品上架    数据
				this.topSaleItems = result.data.topSaleItems; // 保存首页销售排行数据
			});
		},

		methods: {
			search() {
				// 这里可以添加具体的搜索逻辑，例如发送请求到后端进行搜索
				console.log("搜索关键词:", this.searchKeyword);
			},
		},
	};
</script>

<style scoped>
	.home {
		padding: 20px;
		background-color: #f5f5f5;
	}

	/* 定位控件样式 */
	.location-control button {
		border-radius: 3px;
		font-size: 15px;
		cursor: pointer;
		background-color: transparent;
		/* 添加这一行，将底色设置为透明 */
	}

	.location-control button i {
		margin-right: 5px;
		/* 调整定位标志和文字之间的间距 */
	}

	/* 搜索框样式 */
	.search-input {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.search-input input {
		flex: 1;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 3px;
		margin-right: 10px;
	}

	.search-input button {




		padding: 8px 15px;
		background-color: #ffb906;
		color: #fff;
		border: none;
		border-radius: 3px;
		cursor: pointer;
	}

	/* 轮播图样式 */
	.home-swipe {
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
	}
</style>